<template>
  <el-dialog title="地图选点" v-model="isVisble" :before-close="handleClose">
    <div class="mapPointSelect-container">
      <iframe
        id="mapPage"
        width="100%"
        height="100%"
        frameborder="0"
        src="https://apis.map.qq.com/tools/locpicker?
        search=1&type=1&key=LQWBZ-C4YCW-LJNRY-OZ4HG-R5ZVF-AXFPX&referer=myapp"
      ></iframe>
    </div>
  </el-dialog>
</template>
<script>
  import { onMounted, onBeforeUnmount, computed } from '@vue/runtime-core'
  export default {
    name: 'MapPointSelect',
    props: { visible: Boolean, modelValue: Object },
    emits: ['close', 'ponitChange'],
    setup(props, context) {
      let isVisble = computed({
        get() {
          return props.visible
        },
        set() {
          console.log('set =' + isVisble)
          context.emit('close', false)
        },
      })
      const pointChange = function (event) {
        // 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
        var loc = event.data
        if (loc && loc.module == 'locationPicker') {
          //防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
          console.log('location', loc)
          context.emit('ponitChange', loc)
        }
      }
      const handleClose = function () {
        context.emit('close', false)
      }

      onMounted(() => {
        window.addEventListener('message', pointChange, false)
      })

      onBeforeUnmount(() => {
        window.removeEventListener('message', pointChange)
      })
      return {
        isVisble,
        handleClose,
      }
    },
  }
</script>
<style lang="scss" scoped>
  .mapPointSelect-container {
    margin: 0 auto;
    height: 700px;
  }
</style>
